<template>
  <div class="food-timeline">
    <div class="button-container">
      <el-button :icon="CaretLeft" circle
                 type="primary" size="small"
                 @click="previousYearClick"/>

      <el-date-picker
          v-model="foodStore.queryRecord.year"
          type="year" placeholder="请选择年份"
          :editable="false"
          style="width: 100px;"
          @change="changeDateEvent"
      />

      <el-button :icon="CaretRight" circle
                 type="primary" size="small"
                 @click="nextYearClick"/>
    </div>

    <el-timeline v-if="foodStore.recordList.length > 0">
      <el-timeline-item v-for="(item, index) in foodStore.recordList"
                        :key="index" :timestamp="formatDate(item.date)"
                        placement="top" color='var(--el-color-primary)'>
        <div class="timeline-info card-item">
          <span>{{ item.name }}</span>
          <el-image :src="serviceFileRootPath + item.imageUrl"
                    fit="contain" alt="暂无成果">
            <template #error>
              <div class="image-slot">
                <span>暂无图片</span>
              </div>
            </template>
          </el-image>
        </div>
      </el-timeline-item>
    </el-timeline>

    <el-empty v-else description="暂无记录"/>
  </div>
</template>

<script setup lang="ts">
import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
import { useFoodStore } from '@/store/food.ts'
import { formatDate, getLastDate, getNextDate } from 'vue3-common/utils/dateUtil'
import { serviceFileRootPath } from '@/utils'

const foodStore = useFoodStore()

const changeDateEvent = async (value: Date) => {
  foodStore.queryRecord.year = String(value.getFullYear())
  await foodStore.queryRecordList()
}

const previousYearClick = async () => {
  const lastYear = getLastDate(foodStore.queryRecord.year, 1, 'years')
  foodStore.queryRecord.year = String(new Date(lastYear).getFullYear())
  await foodStore.queryRecordList()
}

const nextYearClick = async () => {
  const lastYear = getNextDate(foodStore.queryRecord.year, 1, 'years')
  foodStore.queryRecord.year = String(new Date(lastYear).getFullYear())
  await foodStore.queryRecordList()
}
</script>

<style lang="scss">
.food-timeline {
  display: flex;
  flex-direction: column;

  .button-container {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .el-timeline {
    padding: 10px;

    .el-timeline-item__timestamp {
      font-weight: bold;
      color: #000000;
    }

    .timeline-info {
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;

      .el-image {
        height: 300px;
      }
    }
  }
}
</style>
